<template>
	<u-popup :show="state.show" bgColor="transparent" mode="bottom"  @close="close">
		<view class="Model-wapper">
			<view class="top-info ss-flex">
				<image :src="state.obj?.cover" mode="" class="image"></image>
				<view class="right">
					<view class="title">
						{{state.obj.title}}
					</view>
					<view class="price">
						
						{{state.obj.price}}{{state.obj.mode===2?"g黄金":'张黄金券'}}
					</view>
				</view>

			</view>
			<view class="addres-wapper ss-flex" @tap="toaddress">
				<image src="/static/address.png" mode=""></image>
				<view class="mid" v-if="!address.length">
					先填写地址，再确认订单信息
				</view>
				<view class="mid address" v-else>
					<view class="top ss-flex">
						{{address1.name}} <text class="u-line-1"
							style="width: 320rpx;">{{address1.whole_address}}</text>
					</view>
					<view class="mobile">
						{{address1.mobile}}
					</view>
				</view>
				<view class="right ss-flex">
					<span v-if="!address.length">现在填写</span>
					<u-icon name="arrow-right" size="25rpx" style="margin-left: 10rpx;"></u-icon>
				</view>
			</view>
			<view class="order ">
				<view class="top ss-flex ss-row-between">
					<view class="title">
						数量
					</view>
					<u-number-box v-model="state.amount" integer color="#333333" iconStyle="font-size:15rpx"
						inputWidth="42" bgColor="#fff"></u-number-box>
				</view>
				<view class="bot ss-flex  ss-row-between">
					<view class="title">
						订单备注
					</view>
					<input type="text" placeholder="请输入" />
				</view>
			</view>
			<view class="money ss-flex">
				<image src="/static/yeicon.png" mode=""></image>
				<text>{{state.obj.mode===2?"黄金":'黄金券'}}  余额支付</text>
				<text>（可用：{{state.obj.mode===2?info.gold_money:info.golden_roll}}{{state.obj.mode===2?"g":'张'}}）</text>
				
			</view>
			<view class="hmbh ss-flex">
				<image src="/static/hmbh.png" mode="widthFix"></image>
				<view class="mid ss-flex-col">
					<text>号码保护</text>
					<text class="" style="margin-top: 5rpx;color: #999999;">隐藏收件人真实手机号，保护隐私</text>
				</view>

				<image :src="state.bh?'/static/icon_checked.png':'/static/icon_check.png'" class="check" mode="widthFix"
					@tap="state.bh=!state.bh"></image>
			</view>

			<view class="button-wapper">
				<view class="top-tip ss-flex">
					<image src="/static/xj.png" mode=""></image>
					<view class="title" style="margin-left: 10rpx;">
						共{{state.amount}}件 总计
					</view>
					<view class="price">
						&nbsp; {{total}}{{state.obj.mode===2?"g黄金":'张黄金券'}}
					</view>
				</view>
				<button class="button" @tap="openpassword">立即付款</button>
			</view>
			<globalPassWord ref="password" @confirm="confirm"></globalPassWord>
		</view>
	</u-popup>

</template>

<script setup>
	import {
		computed,
		watch,
		ref,
		reactive,
		unref,
		nextTick
	} from 'vue';
	import LC from '@/LC';
	let info = computed(() => LC.$store('user').info)
	let address = computed(() => LC.$store('user').address)
	let address1 = computed(() => {
		if(!LC.$store('user').address.length){
			return {}
		}
		return state.nowaddress.id ? state.nowaddress : LC.$store('user').address[0]
	})
	const props = defineProps({


	});
	let total = computed(() => {
		return Math.floor(state.obj.price * state.amount * 100) / 100
	})

	let state = reactive({
		show: false,
		bh: true,
		amount: 1,
		obj: {
			images: []
		},
		nowaddress: {}
	})

	function toaddress() {
		LC.$router.go('/pages/user/myAddress', {
			edit: 1
		})
		uni.$once('chooseAddress', a => state.nowaddress = a)
	}
	let password = ref(null)

	function openpassword() {
		if (address1.value.id) {
			password.value.open()
			return
		}
		uni.$u.toast('请选择地址')
	}



	function close() {
		emit('close');
		state.show = false;
	}

	function open(data) {
		state.obj = data
		state.show = true;
	}

	async function confirm(password) {
		const res = await LC.$api.user.exchangeProduct({
			id:state.obj.id,
			address_id: address1.value.id,
			number: state.amount,
			password
		})
		if (res.code == 1) {

			LC.$store('user').userinfo()
			close()
			uni.$u.toast('成功')



		}

	}

	function cancel() {
		emit('cancel');

	}
	let emit = defineEmits(['open', 'close', 'confirm', 'cancel']);
	defineExpose({
		close,
		open
	});
</script>

<style lang="scss" scoped>
	::v-deep .u-number-box {
		border: 2rpx solid #DFDFDF;
		border-radius: 15rpx;
	}

	::v-deep .u-number-box__input {
		border-left: 2rpx solid #DFDFDF;
		border-right: 2rpx solid #DFDFDF;
	}

	.Model-wapper {
		width: 100%;
		min-height: 384rpx;
		border-radius: 46rpx 46rpx 0px 0px;
		padding: 64rpx 30rpx;
		padding-bottom: 0;
		box-sizing: border-box;
		background: #f3f5f7;

		.hmbh {
			padding: 29rpx 23rpx;
			margin-bottom: 64rpx;
			background: #FFFFFF;
			border-radius: 15rpx;

			image {
				width: 33rpx;
			}

			.mid {
				margin-left: 21rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #333333;
				line-height: 38rpx;
			}

			.check {
				margin-left: auto;
			}
		}

		.money {
			margin: 20rpx 0;
			padding: 25rpx 17rpx;
			background: #FFFFFF;
			border-radius: 15rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 27rpx;
			color: #333333;
			line-height: 38rpx;

			text:nth-child(2) {
				margin-left: 15rpx;
			}

			text:nth-child(3) {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #333333;
				line-height: 32rpx;
			}

			.cz {
				margin-left: auto;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #E93030;
				line-height: 32rpx;

			}

			image {
				width: 38rpx;
				height: 38rpx;
			}
		}

		.order {
			background: #FFFFFF;
			border-radius: 15rpx;
			padding: 25rpx 20rpx;

			input {
				text-align: right;
				font-weight: 400;
				font-size: 27rpx;
				color: #969696;
				line-height: 38rpx;
			}

			.bot {
				margin-top: 20rpx;
			}

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #333333;
			}
		}

		.addres-wapper {
			width: 100%;
			height: 143rpx;

			background: #FFFFFF;
			border-radius: 15rpx;
			padding: 0 17rpx;
			margin-bottom: 19rpx;
			margin-top: 25rpx;
			box-sizing: border-box;

			.mid {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 27rpx;
				color: #333333;
				margin-left: 36rpx;
				line-height: 38rpx;

				.top {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 29rpx;
					color: #333333;
					line-height: 40rpx;

					text {
						margin-left: 11rpx;
					}
				}

				.mobile {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					margin-top: 15rpx;
					font-size: 25rpx;
					color: #333333;
					line-height: 34rpx;
				}

			}

			.right {
				margin-left: auto;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 23rpx;
				color: #FC5652;
				line-height: 32rpx;
			}

			image {
				width: 46rpx;
				height: 46rpx;
			}
		}

		.top-info {
			.image {
				width: 99rpx;
				height: 99rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
			}

			.right {
				margin-left: 20rpx;

				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 27rpx;
					color: #333333;
					line-height: 38rpx;
				}

				.price {
					margin-top: 4rpx;

					span {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 23rpx;

						color: #A76B36;

					}

					font-weight: 400;

					color: #A76B36;
					font-size: 31rpx;
				}
			}
		}

	}

	.button-wapper {
		margin: 0 -30rpx;

		.top-tip {
			image {
				width: 33rpx;
				height: 33rpx;
			}

			font-family: PingFangSC,
			PingFang SC;
			font-weight: 400;
			font-size: 23rpx;
			color: #333333;
			margin-bottom: 20rpx;

			.price {
				color: #E93030;
			}
		}

		width: 100vw;
		box-sizing: border-box;
		background: #FFFFFF;
		padding: 20rpx 30rpx;
		box-shadow: 0px -4rpx 32rpx 0px rgba(0, 0, 0, 0.07);
		border-radius: 46rpx 46rpx 0px 0px;
	}

	.button {


		height: 86rpx;
		flex-shrink: 0;
		margin-top: auto;
		background-color: #FC5652;
		border-radius: 15rpx;
		font-weight: 400;
		font-size: 31rpx;
		width: 100%;
		line-height: 86rpx;
		color: #fff;



		&.dis {
			background-color: #CCCCCC;
		}

		&::after {
			display: none;
		}


	}
</style>